<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/bigjo/js/jquery.js"></script>
<title>Insert title here</title>
</head>
<style type="text/css">
	#monthdiv{
		position:relative;
		width: 100px;
		float: left;
	}
	#monthnav li{
		list-style-type: none;
		margin-bottom: 5px;
	}
	
	#monthul{
		margin-left: -50px;
	}
	.monthDiv{
		position:absolute;
		margin-left:60px;
		width:850px;
		float: left;
		
	}
	
</style>
<script type="text/javascript">
	/* 1월 클릭  */
	jQuery.noConflict();
	jQuery(".January").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/january.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".February").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/february.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".March").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/march.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".April").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/april.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".May").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/may.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".June").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/june.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".July").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/july.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".August").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/august.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".September").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/september.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".October").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/october.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".November").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/november.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
	
	jQuery.noConflict();
	jQuery(".December").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/december.monthgenre",
			success:function(data){
				jQuery(".monthDiv").html(data);
			}
		});
	});
</script>



<body>
	<div id="monthdiv">
			<nav id="monthnav">
				<ul id="monthul">
					<li><a class="January">1월</a></li>
					<li><a class="February">2월</a></li>
					<li><a class="March">3월</a></li>
					<li><a class="April">4월</a></li>
					<li><a class="May">5월</a></li>
					<li><a class="June">6월</a></li>
					<li><a class="July">7월</a></li>
					<li><a class="August">8월</a></li>
					<li><a class="September">9월</a></li>
					<li><a class="October">10월</a></li>
					<li><a class="November">11월</a></li>
					<li><a class="December">12월</a></li>
				</ul>
			</nav>
	</div>
	<div class="monthDiv"></div>
</body>
</html>